<template>
    <div class="client-info-feature tc bt bb">
        <div class="client-info-upper clearfix">
            <div class="client-info-item">
                <div class="client-info-title">
                    <span class="client-info-num fb">{{clientInfo.countOfUserBelong}}</span>人
                </div>
                <div class="client-info-text">
                    到店交易客户数
                </div>
            </div>
            <div class="client-info-line bl"></div>
            <div class="client-info-item">
                <div class="client-info-title">
                    <span class="client-info-num fb">{{clientInfo.countOfUserManyTimes}}</span>人
                </div>
                <div class="client-info-text">
                    高频交易客户数
                </div>
            </div>
            <div class="client-info-line bl"></div>
            <div class="client-info-item">
                <div class="client-info-title">
                    <span class="client-info-num fb">{{clientInfo.countOfUserHighValue}}</span>人
                </div>
                <div class="client-info-text">
                    高价值客户数
                </div>
            </div>
        </div>
        <div class="client-info-line bb"></div>
        <div class="client-info-lower clearfix">
            <div class="client-info-item">
                <div class="client-info-title">
                    <span class="client-info-num">{{clientInfo.countOfUserServedSixMonthsAgo}}</span>
                    <span class="client-info-num-sub" :class="clientInfo.countOfUserServedSixMonthsAgo - clientInfo.beforeDayCountOfUserServedSixMonthsAgo > 0 ? 'arrow-more' : 'arrow-less'">
                        {{Math.abs(clientInfo.countOfUserServedSixMonthsAgo - clientInfo.beforeDayCountOfUserServedSixMonthsAgo)}}
                    </span>
                </div>
                <div class="client-info-text">
                    最近6个月未到访客户
                </div>
            </div>
            <div class="client-info-line bl"></div>
            <div class="client-info-item">
                <div class="client-info-title">
                    <span class="client-info-num">{{clientInfo.countOfUserOilChangedFourMonthsAgo}}</span>
                    <span class="client-info-num-sub" :class="clientInfo.countOfUserOilChangedFourMonthsAgo - clientInfo.beforeDayCountOfUserOilChangedFourMonthsAgo > 0 ? 'arrow-more' : 'arrow-less'">
                        {{Math.abs(clientInfo.countOfUserOilChangedFourMonthsAgo - clientInfo.beforeDayCountOfUserOilChangedFourMonthsAgo)}}
                    </span>
                </div>
                <div class="client-info-text">
                    4个月前做过保养业务用户
                </div>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    export default{
        data(){
            return {
                clientInfo: {},
                storeId: '1700012'
            };
        },
        created(){
            this.$http.get('/mobile/storeManagement/getStoreManagementReport?storeId=' + this.storeId).then(function (res) {
                res = res.body;
                if(res.code == 0){
                    res = res.result;
                    this.clientInfo = res;
                }else {
                    console.warn(res.code);
                }
            }, function (res) {
                console.warn('错误码'+ res.status);
            })
        }
    }
</script>
<style lang="scss">
    @import "../../assets/css/common.scss";

    .client-info-feature{
        background-color: #fff;
        font-size: rem(12);
        color: #332b29;
        >div>div{
             float: left;
         }
        >.client-info-line{
             height: 0;
             width: rem(363);
             margin: 0 rem(12);
         }
        .client-info-upper .client-info-item{
            width: rem(122);
            height: rem(80);
        }
        .client-info-lower .client-info-item{
            width: rem(186);
            height: rem(80);
        }
    }
    .client-info-upper, .client-info-lower{
        display: flex;
        >div.client-info-item{
             flex: 1;
         }
    }
    .client-info-line{
        width: 0;
        height: rem(60);
        margin-top: rem(10);
    }
    .client-info-title{
        margin-top: rem(17);
        margin-bottom: rem(8);
        .client-info-num{
            font-size: rem(26);
            height: rem(26);
            font-weight: bold;
        }
    }
    .client-info-text{
        margin-bottom: rem(13);
    }
    .client-info-num-sub{
        font-size: rem(14);
    }
    .arrow-more:before{
        color: #ef6f58;
        display: inline-block;
        content: '↑';
        font-size: rem(14);
        position: relative;
        top: rem(-1);
    }
    .arrow-less:before{
        color: #79cf19;
        display: inline-block;
        content: '↓';
        font-size: rem(14);
        position: relative;
        top: rem(-1);
    }
</style>
